<template>
    <div class="ma-content-block lg:flex justify-between p-4">
        <div class="app-container">
            <div class="container-header">
                <div class="container-header-tr">
                    <div>
                        <span style="width: 80px" class="s1">{{
                            $t('basics.username')
                        }}</span>
                        <a-input
                            v-model="form.username"
                            :placeholder="$t('basics.username')"
                        />
                    </div>
                    <div>
                        <span class="s1">{{ $t('basics.bandPro') }}</span>
                        <a-select
                            style="width: 120px"
                            v-model="form.project_id"
                            :placeholder="$t('basics.textPro')"
                            allow-clear
                        >
                            <a-option
                                v-for="item in projectList"
                                :label="item.project_name"
                                :value="item.id"
                            ></a-option>
                        </a-select>
                    </div>
                    <div>
                        <span class="s1">{{ $t('basics.status') }}</span>
                        <a-select
                            style="width: 120px"
                            v-model="form.status"
                            :placeholder="$t('basics.textStatus')"
                            allow-clear
                        >
                            <a-option
                                :label="$t('basics.zhengchang')"
                                :value="1"
                            ></a-option>
                            <a-option
                                :label="$t('basics.tingyong')"
                                :value="2"
                            ></a-option>
                        </a-select>
                    </div>
                    <div>
                        <a-button
                            class="mr20"
                            type="primary"
                            @click="searchButton"
                        >
                            <icon-search class="mr6" />
                            {{ $t('basics.search') }}
                        </a-button>
                        <a-button type="secondary" @click="resetButton">
                            <icon-refresh class="mr6" />
                            {{ $t('basics.reset') }}
                        </a-button>
                    </div>
                </div>
                <div class="container-header-tr mt10 mb10">
                    <div>
                        <a-button class="mr20" type="primary" @click="addAdmin">
                            <icon-plus class="mr6" />
                            {{ $t('basics.addAdmin') }}
                        </a-button>
                        <a-button
                            class="mr20"
                            type="primary"
                            @click="importAcc"
                        >
                            {{ $t('basics.importAccountClient') }}
                        </a-button>
                        <a-button class="mr20" type="primary" @click="addAcc">
                            <icon-plus class="mr6" />
                            {{ $t('basics.addAcc') }}
                        </a-button>
                    </div>
                </div>
            </div>
            <div class="container-content">
                <div class="container-content-table">
                    <a-table
                        :stripe="true"
                        :columns="columns"
                        :data="tableList"
                        :loading="loading"
                        :row-selection="rowSelection"
                        v-model:selectedKeys="selectedKeys"
                        row-key="id"
                        @selection-change="getRowData"
                        :pagination="false"
                    >
                        <template #operate="{ record }">
                            <a-link @click="changePrw(record)">
                                {{ $t('basics.changePsw') }}</a-link
                            >
                        </template>
                    </a-table>
                    <div
                        class="_crud-footer mt-3 text-right"
                        ref="crudFooterRef"
                    >
                        <a-pagination
                            :total="pageList.total"
                            show-total
                            show-jumper
                            show-page-size
                            @page-size-change="getList"
                            @change="getList"
                            v-model:current="form.page"
                            :page-size-options="[10, 20, 50, 100]"
                            :default-page-size="100"
                            v-model:page-size="form.pageSize"
                            style="display: inline-flex"
                        />
                    </div>
                </div>
            </div>
            <a-modal
                v-model:visible="changeVisible"
                :render-to-body="false"
                :footer="false"
            >
                <template #title> {{ $t('basics.changePsw') }} </template>
                <a-form
                    :model="changeForm"
                    ref="changeFormRef"
                    :rules="changeRules"
                >
                    <a-form-item
                        field="new_password"
                        :label="$t('basics.password')"
                        label-col-flex="80px"
                        validate-trigger="blur"
                    >
                        <a-input
                            style="width: 100%; margin-right: 20px"
                            v-model="changeForm.new_password"
                            :placeholder="$t('basics.prdText')"
                            @keyup.enter="changeHandleOk"
                        />
                    </a-form-item>
                </a-form>
                <div class="dialog-foot">
                    <a-button class="mr20 c0" @click="changeVisible = false">{{
                        $t('basics.concel')
                    }}</a-button>
                    <a-button
                        class="mr20"
                        type="primary"
                        @click="changeHandleOk"
                        >{{ $t('basics.sure') }}</a-button
                    >
                </div>
            </a-modal>
            <a-modal
                v-model:visible="visibleAdmin"
                :render-to-body="false"
                :footer="false"
            >
                <template #title> {{ $t('basics.addAdmin') }} </template>
                <a-form
                    :model="adminForm"
                    ref="adminFormRef"
                    :rules="adminRules"
                >
                    <a-form-item
                        field="username"
                        :label="$t('basics.accName')"
                        label-col-flex="80px"
                        validate-trigger="blur"
                    >
                        <a-input
                            style="width: 100%; margin-right: 20px"
                            v-model="adminForm.username"
                            :placeholder="$t('basics.textAcc')"
                            @keyup.enter="handleOkAdmin"
                        />
                    </a-form-item>
                    <a-form-item
                        field="password"
                        :label="$t('basics.password')"
                        label-col-flex="80px"
                        validate-trigger="blur"
                    >
                        <a-input
                            style="width: 100%; margin-right: 20px"
                            v-model="adminForm.password"
                            :placeholder="$t('basics.prdText')"
                            @keyup.enter="handleOkAdmin"
                        />
                    </a-form-item>
                    <a-form-item
                        field="project_id"
                        :label="$t('basics.bandPro')"
                        label-col-flex="80px"
                        validate-trigger="change"
                    >
                        <a-select
                            style="width: 100%; margin-right: 20px"
                            v-model="adminForm.project_id"
                            :placeholder="$t('basics.textBandPro')"
                        >
                            <a-option
                                v-for="item in projectList"
                                :label="item.project_name"
                                :value="item.id"
                            ></a-option>
                        </a-select>
                    </a-form-item>
                </a-form>
                <div class="dialog-foot">
                    <a-button
                        class="mr20 c0"
                        @click="visibleAdmin = !visibleAdmin"
                        >{{ $t('basics.concel') }}</a-button
                    >
                    <a-button
                        class="mr20"
                        type="primary"
                        @click="handleOkAdmin"
                        >{{ $t('basics.sure') }}</a-button
                    >
                </div>
            </a-modal>
            <a-modal
                v-model:visible="visibleAcc"
                :render-to-body="false"
                :footer="false"
            >
                <template #title> {{ $t('basics.addAcc') }} </template>
                <a-form :model="accForm" ref="accFormRef" :rules="accRules">
                    <a-form-item
                        field="username"
                        :label="$t('basics.accName')"
                        label-col-flex="90px"
                        validate-trigger="blur"
                    >
                        <a-input
                            style="width: 100%; margin-right: 20px"
                            v-model="accForm.username"
                            :placeholder="$t('basics.textAcc')"
                            @keyup.enter="handleOkAcc"
                        />
                    </a-form-item>
                    <a-form-item
                        field="password"
                        :label="$t('basics.password')"
                        label-col-flex="90px"
                        validate-trigger="blur"
                    >
                        <a-input
                            style="width: 100%; margin-right: 20px"
                            v-model="accForm.password"
                            :placeholder="$t('basics.prdText')"
                            @keyup.enter="handleOkAcc"
                        />
                    </a-form-item>
                    <a-form-item
                        field="project_id"
                        :label="$t('basics.bandPro')"
                        label-col-flex="90px"
                        validate-trigger="change"
                    >
                        <a-select
                            v-model="accForm.project_id"
                            style="width: 100%; margin-right: 20px"
                            :placeholder="$t('basics.textBandPro')"
                        >
                            <a-option
                                v-for="item in projectList"
                                :label="item.project_name"
                                :value="item.id"
                            ></a-option>
                        </a-select>
                    </a-form-item>
                </a-form>
                <div class="dialog-foot">
                    <a-button
                        class="mr20 c0"
                        @click="visibleAcc = !visibleAcc"
                        >{{ $t('basics.concel') }}</a-button
                    >
                    <a-button
                        class="mr20"
                        type="primary"
                        @click="handleOkAcc"
                        style="margin-right: 20px"
                        >{{ $t('basics.sure') }}</a-button
                    >
                </div>
            </a-modal>
            <ma-import
                :render-to-body="false"
                ref="crudImportRef"
                :upLoadData="importFile"
                @success="refresh"
                :isShowLoad="true"
                :downLoadData="downFile"
                :projectList="projectList"
            />
        </div>
    </div>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue';
import {
    getClientList,
    getProjectList,
    addAdminClient,
    addStaff,
    updataPrw
} from '@/api/cloud/client.js';
import { useI18n } from 'vue-i18n';
import MaImport from './components/import.vue';
import { getProjectId } from '@/api/cloud/userProject.js';
const { proxy } = getCurrentInstance();
const { t } = useI18n();
const selectedKeys = ref([]);
const rowSelection = ref({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false
});
// 选中行的list
const checkedList = ref([]);
const accFormRef = ref('');
const adminFormRef = ref('');
const adminForm = ref({});
const accForm = ref({});
const ProjectId = ref({});
const loading = ref(true);
const visibleAdmin = ref(false);
const visibleAcc = ref(false);
const crudImportRef = ref('');
const changeVisible = ref(false);
const changeFormRef = ref('');
const changeForm = ref({});
const importFile = ref({
    url: 'cloud/client/importStaff'
});
const downFile = ref({
    url: 'cloud/client/download'
});
// 分页数据
const pageList = ref({
    total: 0
});
const columns = [
    {
        title: t('basics.username'),
        dataIndex: 'username',
        minWidth: 200
    },
    {
        title: t('basics.createAt'),
        dataIndex: 'created_at',
        minWidth: 200
    },
    {
        title: t('basics.updataAt'),
        dataIndex: 'updated_at',
        minWidth: 200
    },
    {
        title: t('basics.controls'),
        dataIndex: 'operate',
        width: 120,
        slotName: 'operate'
    }
];

const form = ref({
    username: '',
    phone: '',
    project_id: '',
    status: '',
    page: 1,
    pageSize: 100
});
const changeRules = ref({
    new_password: [
        {
            required: true,
            message: t('basics.newPswWarn')
        }
    ]
});
const adminRules = ref({
    username: [
        {
            required: true,
            message: t('basics.warnAcc')
        }
    ],
    password: [
        {
            required: true,
            message: t('basics.warnPrd')
        }
    ],
    project_id: [
        {
            required: true,
            message: t('basics.warnPro')
        }
    ]
});
const accRules = ref({
    username: [
        {
            required: true,
            message: t('basics.warnAcc')
        }
    ],
    password: [
        {
            required: true,
            message: t('basics.warnPrd')
        }
    ],
    project_id: [
        {
            required: true,
            message: t('basics.warnPro')
        }
    ],
    num: [
        {
            required: true,
            message: t('basics.warnAccNum')
        }
    ]
});
// 获取选择列
const getRowData = (selectedRowKeys) => {
    checkedList.value = selectedRowKeys;
    console.log(checkedList.value);
};
const tableList = ref([]);
// 获取美国项目id
const getId = () => {
    getProjectId({ project_key: 'america' }).then((res) => {
        ProjectId.value = res.data.id;
    });
};
getId();
// 获取列表数据
const getList = () => {
    getClientList(form.value).then((res) => {
        tableList.value = res.data.items;
        pageList.value = res.data.pageInfo;
        loading.value = false;
    });
};
getList();
//   导入成功后
const refresh = () => {
    getList();
};
// 获取项目列表
const projectList = ref([]);
const getProject = () => {
    getProjectList().then((res) => {
        projectList.value = res.data.items;
    });
};
getProject();
// 搜索
const searchButton = () => {
    getList();
};
const reset = () => {
    form.value.username = '';
    form.value.phone = '';
    form.value.status = '';
    form.value.project_id = '';
    form.value.page = 1;
    form.value.pageSize = 100;
};
const resetAdmin = () => {
    adminForm.value.username = '';
    adminForm.value.password = '123456';
    adminForm.value.project_id = ProjectId.value;
};
const resetAcc = () => {
    accForm.value.username = '';
    accForm.value.password = '123456';
    accForm.value.project_id = ProjectId.value;
};
const resetButton = () => {
    reset();
    getList();
};

// 修改密码
const changePrw = (prw) => {
    changeForm.value.user_id = prw.id;
    changeForm.value.new_password = '';
    changeVisible.value = true;
};
// 新增管理员
const addAdmin = () => {
    resetAdmin();
    visibleAdmin.value = true;
};
const addAcc = () => {
    // crudImportRef.value.open()
    resetAcc();
    visibleAcc.value = true;
};
const importAcc = () => {
    crudImportRef.value.open(projectList.value, ProjectId.value);
};

// 修改密码
const changeHandleOk = () => {
    proxy.$refs['changeFormRef'].validate((valid) => {
        if (!valid) {
            updataPrw(changeForm.value)
                .then((res) => {
                    if (res.code == 200) {
                        proxy.$message.success(t('basics.updataSecc'));
                        changeVisible.value = false;
                    }
                })
                .catch((error) => {});
        }
    });
};
// 添加管理员
const handleOkAdmin = () => {
    proxy.$refs['adminFormRef'].validate((valid) => {
        if (!valid) {
            addAdminClient(adminForm.value)
                .then((res) => {
                    if (res.code == 200) {
                        visibleAdmin.value = false;
                        proxy.$message.success(t('basics.controlsSecc'));
                        getList();
                    } else {
                        visibleAdmin.value = false;
                        proxy.$message.error(res.message);
                    }
                })
                .catch((error) => {});
        }
    });
};
const handleOkAcc = () => {
    proxy.$refs['accFormRef'].validate((valid) => {
        if (!valid) {
            addStaff(accForm.value)
                .then((res) => {
                    if (res.code == 200) {
                        visibleAcc.value = false;
                        proxy.$message.success(t('basics.controlsSecc'));
                        getList();
                    } else {
                        visibleAcc.value = false;
                        proxy.$message.error(res.message);
                    }
                })
                .catch((error) => {});
        }
    });
};
</script>
<script>
export default { name: 'cloud:client' };
</script>
<style lang="less" scoped>
@import url('@/style/layout.less');
</style>
